There are two conventional drawing techniques: vector-based and raster-based.
Vector-based drawing provides for clean scaling, rotation, and grouping without any loss of information. Vector drawing is performed by drawing geometric shapes from shape descriptions. The underlying storage is a shape description. Vector drawings can be manipulated after they are drawn to move and resize individual elements. The shape can be scaled, rotated and/or undone without losing any information. Vector drawing is generally used for creating illustrations. Examples of vector drawing include flow charts and Visio and PowerPoint style diagrams. However, vector transformations are limited in their scope and flexibility.
In contrast, raster drawing is done by modifying or transforming a bitmap. The underlying storage is a set of bits. Raster drawing is performed by modifying and/or transforming a bitmap, such as darkening, blurring, sharpening and red-eye removal. However, information is lost during modification and/or transformation because the image is distorted. Raster transformations are destructive, because the changes are made in place on the image by directly modifying the values of the individual pixels. Raster techniques are used for creating and manipulating illustrations. Raster drawing provides photorealism.
In general, the vector and raster techniques are mutually exclusive. The two techniques of raster and vector drawing are generally not used in combination because vector drawing allows for no loss of information during raster transformation. Therefore, many of the raster transformations, such as darkening, blurring, sharpening and red-eye removal are not available for use in the vector technique.
Furthermore, conventional browsers contain a technology for rendering vector images called vector markup language (VML) or Scalable Vector Graphics (SVG). Vectors are described textually using the VML or SVG formats and then drawn in a browser.
Conventional image editing methods do not enable vector and raster imaging to be combined. One conventional image editing method uses a technique called masking, which is also named transparency layer. The transparency mask (or layer) is a gray scale raster image (as a separate image or an additional color channel added to the image being edited) with the size of the original image that is being edited. The specific area of the edited image that is required to be affected is described by using the corresponding area on the transparency layer by setting the pixel value of the transparency layer to the maximum value and areas not affected to the minimum value. Setting a pixel value on the transparency layer to a value between the maximum and minimum can indicate a percentage effect (the closer to the maximum value the closer the effect to the maximum effect. It should be noted that the transparency layer in conventional image editing methods uses a (raster) image and therefore does not have the advantages of using a (vector) layer (easy scaling, rotation moving, etc.). Furthermore, the transparency layer effect is interpreted by the editing application, and does not describe what the actual effect the transparency layer should apply to the edited image).
Conventional browsers also allow extensions to create effects and manipulate images in the browser, such as Microsoft®DirectX® Transform (DXTransforms). Other examples are Adobe PhotoShop® Plug-in® and Adobe® Premiere® filter. More specifically, each transform in DXTransforms is a set of instructions describing how to turn one or more graphic inputs into one graphic output. The inputs and output can be either 2-D bitmap images or 3-D mesh objects, depending on which transform is implemented. Many transforms are gradual transitions from one image to another, while others are gradual modifications of 3-D meshes. In particular, DXTransforms enable an image processing process or method to be applied to a browser element (such as an image, a chunk of text, etc.). Specifically, what occurs is that before the browser displays an object, the browser passes the bitmap to any transforms for the object, and the transforms will alter the bitmap before the bitmap is displayed. Typically such transforms are used for adding drop shadows to text, inverting images for mouse over highlights, etc. DXTransforms support chaining. That is, several transformations can be combined together.
When Microsoft® Internet® Explorer® draws a shape, it draws the shape to a buffer. Before it composes the shape with the rest of the screen, Internet Explorer checks if there are any DXTransforms attached. If so, it calls the first DXTransform. It passes in two parameters: an input parameter, containing the shape, and an output parameter, containing the background. Although this particular handshake is how Internet Explorer operates, it is not different in technique from how other browser and composition tools operate.
In conventional DXTransforms, it is not possible to draw a vector shape on top of a bitmap because DXTransforms apply only to the image associated with the shape to which they are attached. More specifically, in conventional DXTransforms, when a transform is applied to a region defined by a shape, and a darken filter is applied, the shape and text would get darker, but not the parts of the bitmap underneath.